<template>
    <div>
        <!--        头查询 -->
        <el-row :gutter="4">
            <el-col :span="4">
                <el-autocomplete
                        class="inline-input"
                        prefix-icon="fa fa-search"
                        v-model="keyword.stuName"
                        :fetch-suggestions="querySearch"
                        placeholder="学生姓名"
                        :trigger-on-focus="false"
                        @keyup.enter.native="initStudentBase"
                        v-permission="'student:base:list'"
                        clearable
                ></el-autocomplete>
            </el-col>
            <el-col :span="4">
                <el-input v-model.trim="keyword.stuIdentityId" prefix-icon="fa fa-search" placeholder="身份证号"
                          v-permission="'student:base:list'"
                          @keyup.enter.native="initStudentBase"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="fa fa-search" @click="initStudentBase"
                           v-permission="'student:base:list'"> 搜 索
                </el-button>
            </el-col>
            <el-col :span="2" :offset="2">
                <el-popover
                        placement="bottom"
                        width="800"
                        v-model="visible"
                        trigger="click">
                    <el-form ref="keyword" :model="keyword" label-width="100px" label-position="left">
                        <h3 align="center">高 级 搜 索</h3>
                        <el-row :gutter="30">
                            <el-col :span="8" :offset="4">
                                <el-form-item label="学生姓名:" prop="stuName">
                                    <el-input v-model="keyword.stuName" prefix-icon="el-icon-user"
                                              placeholder="学生姓名"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="身份证号:" prop="stuIdentityId">
                                    <el-input v-model="keyword.stuIdentityId" prefix-icon="el-icon-user-solid"
                                              placeholder="身份证号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学号:" prop="stuNum">
                                    <el-input v-model="keyword.stuNum" placeholder="学号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="考生号:" prop="stuExamId">
                                    <el-input v-model="keyword.stuExamId" placeholder="考生号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="入学年份:" prop="stuInDate">
                                    <el-date-picker
                                            v-model="keyword.stuInDate"
                                            type="year"
                                            format="yyyy"
                                            value-format="yyyy"
                                            placeholder="入学年份">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="政治面貌:" prop="stuPolitical">
                                    <el-select v-model="keyword.stuPolitical" placeholder="政治面貌">
                                        <el-option
                                                v-for="item in recommend.form.political"
                                                :key="item"
                                                :label="item"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="入学方式:" prop="stuInWay">
                                    <el-select v-model="keyword.stuInWay" placeholder="入学方式">
                                        <el-option
                                                v-for="item in recommend.form.student_way"
                                                :key="item"
                                                :label="item"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学籍状态:" prop="stuStatus">
                                    <el-select v-model="keyword.stuStatus" placeholder="学籍状态">
                                        <el-option
                                                v-for="item in recommend.form.student_status"
                                                :key="item"
                                                :label="item"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学籍类别:" prop="stuStatusCategory">
                                    <el-select v-model="keyword.stuStatusCategory" placeholder="学籍类别">
                                        <el-option
                                                v-for="item in recommend.form.student_status_category"
                                                :key="item"
                                                :label="item"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="二级学院:" prop="stuSchool">
                                    <el-input v-model="keyword.stuSchool" placeholder="二级学院"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="专业:" prop="stuMajor">
                                    <el-input v-model="keyword.stuMajor" placeholder="专业"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="班级:" prop="stuClass">
                                    <el-input v-model="keyword.stuClass" placeholder="班级"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学历层次:" prop="stuDegrees">
                                    <el-input v-model="keyword.stuDegrees" placeholder="学历层次"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="联系电话:" prop="stuTel">
                                    <el-input v-model="keyword.stuTel" placeholder="联系电话"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="民族:" prop="stuNation">
                                    <el-input v-model="keyword.stuNation" placeholder="民族"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="辅导员:" prop="stuTutor">
                                    <el-input v-model="keyword.stuTutor" placeholder="辅导员"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="监护人姓名:" prop="stuGuardiansName">
                                    <el-input v-model="keyword.stuGuardiansName" placeholder="监护人姓名"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div style="display: flex;justify-content: center;">
                            <el-form-item>
                                <el-button type="primary" icon="fa fa-search" @click="initStudentBase"> 搜 索</el-button>
                                <el-button icon="fa fa-refresh" @click="$refs.keyword.resetFields()" size="small"> 清 空
                                </el-button>
                            </el-form-item>
                        </div>

                    </el-form>
                    <el-button slot="reference" type="primary" icon="fa fa-angle-double-down"
                               v-permission="'student:base:list'"> 高 级 搜 索
                    </el-button>
                </el-popover>
            </el-col>
            <el-col :span="2" style="margin-left: 20px">
                <el-button type="primary" icon="fa fa-plus" @click="handleAdd"
                           v-permission="'student:base:add'"> 添 加 信 息
                </el-button>
            </el-col>
            <el-col :span="2" style="margin-left: 20px">
                <el-button type="danger" icon="fa fa-trash" @click="handleMultipleDelete"
                           v-permission="'student:base:delete'"> 删
                    除 多 个
                </el-button>
            </el-col>
            <el-col :span="2" style="margin-left: 20px">
                <el-button type="success" icon="fa fa-download" @click="exportExcel" v-permission="'student:base:list'">
                    导 出 Excel
                </el-button>
            </el-col>
            <el-col :span="1" style="margin-left: 20px;">
                <el-button type="warning" icon="fa fa-refresh"
                           v-permission="'student:base:list'"
                           @click="refresh">
                </el-button>
            </el-col>
        </el-row>
        <!--        表单 -->
        <el-row>
            <el-col :span="24">
                <el-table width="100%" border :data="page.row" @selection-change="handleSelectionChange"
                          @row-dblclick="dbClick"
                >
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <!--      详情信息         -->
                    <el-table-column label="详情" align="center">
                        <template slot-scope="scope">
                            <el-button @click="viewDetails(scope.row)" type="text">查看详情</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stuIdentityId" label="身份证号" align="center" width="160"></el-table-column>
                    <el-table-column prop="stuNum" label="学号" align="center" width="120"></el-table-column>
                    <el-table-column prop="stuExamId" label="考生号" align="center" width="120"></el-table-column>
                    <el-table-column prop="stuName" sortable label="姓名" align="center" fixed="left"></el-table-column>
                    <el-table-column prop="stuGender" label="性别" align="center"></el-table-column>
                    <el-table-column prop="stuAge" sortable label="年龄" align="center"></el-table-column>
                    <el-table-column prop="stuInDate" sortable label="入学年份" align="center"
                                     width="110"></el-table-column>
                    <el-table-column prop="stuPolitical" label="政治面貌" align="center"></el-table-column>
                    <el-table-column prop="stuInWay" label="入学方式" align="center"></el-table-column>
                    <el-table-column prop="stuStatus" label="学籍状态" align="center"></el-table-column>
                    <el-table-column prop="stuStatusCategory" label="学籍类别" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.stuStatusCategory === '正常'" type="success">
                                {{scope.row.stuStatusCategory}}
                            </el-tag>
                            <el-tag v-else type="warning">
                                {{scope.row.stuStatusCategory}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stuBank" label="开户银行" align="center" width="120"></el-table-column>
                    <el-table-column prop="stuBankId" label="银行卡号" align="center" width="175s"></el-table-column>
                    <el-table-column prop="stuIsLoan" label="是否贷款" align="center"></el-table-column>
                    <el-table-column prop="stuSchool" label="二级学院" align="center"></el-table-column>
                    <el-table-column prop="stuMajor" label="专业" align="center"></el-table-column>
                    <el-table-column prop="stuClass" label="班级" align="center"></el-table-column>
                    <el-table-column prop="stuDegrees" label="学历层次" align="center"></el-table-column>
                    <el-table-column prop="stuBirthday" label="生日" align="center" width="120"></el-table-column>
                    <el-table-column prop="stuTel" label="联系电话" align="center" width="120"></el-table-column>
                    <el-table-column prop="stuEmail" label="邮箱" align="center" width="160">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" :content="scope.row.stuEmail"
                                        placement="right">
                                <span> {{ cutStr(scope.row.stuEmail,18)}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stuOnlyChild" label="是否独生子女" align="center" width="80"></el-table-column>
                    <el-table-column prop="stuFromAreaName" label="生源名称" align="center" width="110"></el-table-column>
                    <el-table-column prop="stuFromArea" label="生源地区域" align="center" width="110"></el-table-column>
                    <el-table-column prop="stuNation" label="民族" align="center"></el-table-column>
                    <el-table-column prop="stuFamilyAddress" label="家庭住址" align="center" width="180">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" :content="scope.row.stuFamilyAddress"
                                        placement="right">
                                <span> {{ scope.row.stuFamilyAddress.length < 10 ? scope.row.stuFamilyAddress : `${scope.row.stuFamilyAddress.substr(0,10)}...`}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stuTutor" label="辅导员" align="center"></el-table-column>
                    <el-table-column prop="stuTutorTel" label="辅导员电话" align="center" width="120"></el-table-column>
                    <el-table-column prop="stuGuardiansName" label="监护人姓名" align="center" width="110"></el-table-column>
                    <el-table-column prop="stuGuardiansTel" label="监护人电话" align="center" width="120"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)" icon="fa fa-pencil"
                                       v-permission="'student:base:update'"> 修 改
                            </el-button>
                            <el-button type="danger" @click="handleDelete(scope.row)" icon="fa fa-times-rectangle"
                                       v-permission="'student:base:delete'"> 删 除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-drawer
                :title="data.stuName"
                :visible.sync="drawer"
                direction="rtl"
                :before-close="handleDrawerClose"
                append-to-body
                close-on-press-escape
                size="42%"
        >
            <el-descriptions :column="2" style="margin-left: 18px" size="medium" border>
                <el-descriptions-item label="身份证">{{data.stuIdentityId}}</el-descriptions-item>
                <el-descriptions-item label="学号">{{data.stuNum}}</el-descriptions-item>
                <el-descriptions-item label="考生号">{{data.stuExamId}}</el-descriptions-item>
                <el-descriptions-item label="性别">
                    {{ data.stuGender }}
                    <i :class=" data.stuGender === '男' ? 'fa fa-male' : 'fa fa-female'"
                       aria-hidden="true" style="font-size: 16px; margin-left: 10px"></i>
                </el-descriptions-item>
                <el-descriptions-item label="年龄">{{ data.stuAge }}</el-descriptions-item>
                <el-descriptions-item label="入学年份">{{ data.stuInDate }}</el-descriptions-item>
                <el-descriptions-item label="政治面貌">{{ data.stuPolitical }}</el-descriptions-item>
                <el-descriptions-item label="学籍状态">{{ data.stuStatus }}</el-descriptions-item>
                <el-descriptions-item label="学籍类别">
                    <el-tag v-if="data.stuStatusCategory === '正常'" type="success">
                        {{data.stuStatusCategory}}
                    </el-tag>
                    <el-tag v-else type="warning">
                        {{data.stuStatusCategory}}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="开户银行">{{ data.stuBank }}</el-descriptions-item>
                <el-descriptions-item label="银行卡号">
                    <el-tooltip class="item" effect="dark" :content="data.stuBankId"
                                placement="right">
                        <span> {{cutStr(data.stuBankId , 14)}}</span>
                    </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item label="是否贷款">{{ data.stuIsLoan}}</el-descriptions-item>
                <el-descriptions-item label="二级学院">
                    <el-tag>{{data.stuSchool}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="专业">{{ data.stuMajor}}</el-descriptions-item>
                <el-descriptions-item label="班级">{{ data.stuClass}}</el-descriptions-item>
                <el-descriptions-item label="学历层次">{{ data.stuDegrees}}</el-descriptions-item>
                <el-descriptions-item label="生日">{{ data.stuBirthday}}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ data.stuTel}}</el-descriptions-item>
                <el-descriptions-item label="邮箱">
                    <el-tooltip class="item" effect="dark" :content="data.stuEmail"
                                placement="right">
                        <span> {{cutStr(data.stuEmail , 24)}}</span>
                    </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item label="是否独生子女">{{ data.stuOnlyChild}}</el-descriptions-item>
                <el-descriptions-item label="生源名称">{{ data.stuFromAreaName}}</el-descriptions-item>
                <el-descriptions-item label="生源地区域">{{ data.stuFromArea}}</el-descriptions-item>
                <el-descriptions-item label="民族">{{ data.stuNation}}</el-descriptions-item>
                <el-descriptions-item label="家庭住址">
                    <el-tooltip class="item" effect="dark" :content="data.stuFamilyAddress"
                                placement="right">
                        <span> {{cutStr(data.stuFamilyAddress , 12)}}</span>
                    </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item label="辅导员">{{ data.stuTutor}}</el-descriptions-item>
                <el-descriptions-item label="辅导员电话">{{ data.stuTutorTel}}</el-descriptions-item>
                <el-descriptions-item label="监护人姓名">{{ data.stuGuardiansName}}</el-descriptions-item>
                <el-descriptions-item label="监护人电话">{{ data.stuGuardiansTel}}</el-descriptions-item>

            </el-descriptions>
        </el-drawer>
        <!--        分页 -->
        <el-row v-if="page.total > 10">
            <el-col :span="22">
                <el-pagination v-if="page.total > 10"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="pagination.current"
                               :page-sizes="[9 ,10, 20, 30, 50]"
                               :page-size="pagination.size"
                               layout="total, sizes, prev, pager, next"
                               :total="page.total">
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog
                v-dialog-drag
                :title="isAdd ? '新 增 数 据' : '修 改 数 据'"
                :visible.sync="centerDialogVisible"
                width="80%"
                center
                @close="resetField"
                style="margin-top: -80px;padding-bottom: 20px"
        >
            <el-form ref="form" :rules="rules" :model="data" label-width="100px" label-position="left">
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="学生姓名:" prop="stuName">
                            <el-input v-model="data.stuName" prefix-icon="el-icon-user" placeholder="学生姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="身份证号:" prop="stuIdentityId">
                            <el-input v-model="data.stuIdentityId" prefix-icon="el-icon-user-solid"
                                      placeholder="身份证号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学号:" prop="stuNum">
                            <el-input v-model="data.stuNum" placeholder="学号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="考生号:" prop="stuExamId">
                            <el-input v-model="data.stuExamId" placeholder="考生号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别:" prop="stuGender">
                            <el-radio v-model="data.stuGender" label="男">男</el-radio>
                            <el-radio v-model="data.stuGender" label="女">女</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="年龄:" prop="stuAge">
                            <el-input-number v-model="data.stuAge" :min="10" :max="99" label="描述文字"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="入学年份:" prop="stuInDate">
                            <el-date-picker
                                    v-model="data.stuInDate"
                                    type="year"
                                    format="yyyy"
                                    value-format="yyyy"
                                    placeholder="入学年份">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="政治面貌:" prop="stuPolitical">
                            <el-select v-model="data.stuPolitical" placeholder="政治面貌">
                                <el-option
                                        v-for="item in recommend.form.political"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="入学方式:" prop="stuInWay">
                            <el-select v-model="data.stuInWay" placeholder="入学方式">
                                <el-option
                                        v-for="item in recommend.form.student_way"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学籍状态:" prop="stuStatus">
                            <el-select v-model="data.stuStatus" placeholder="学籍状态">
                                <el-option
                                        v-for="item in recommend.form.student_status"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学籍类别:" prop="stuStatusCategory">
                            <el-select v-model="data.stuStatusCategory" placeholder="学籍类别">
                                <el-option
                                        v-for="item in recommend.form.student_status_category"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="开户银行:" prop="stuBank">
                            <el-input v-model="data.stuBank" placeholder="开户银行"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行卡号:" prop="stuBankId">
                            <el-input v-model="data.stuBankId" placeholder="银行卡号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否贷款:" prop="stuIsLoan">
                            <el-radio v-model="data.stuIsLoan" label="是">是</el-radio>
                            <el-radio v-model="data.stuIsLoan" label="否">否</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="二级学院:" prop="stuSchool">
                            <el-input v-model="data.stuSchool" placeholder="二级学院"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="专业:" prop="stuMajor">
                            <el-input v-model="data.stuMajor" placeholder="专业"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级:" prop="stuClass">
                            <el-input v-model="data.stuClass" placeholder="班级"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学历层次:" prop="stuDegrees">
                            <el-input v-model="data.stuDegrees" placeholder="学历层次"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="生日:" prop="stuBirthday">
                            <el-date-picker
                                    v-model="data.stuBirthday"
                                    type="date"
                                    placeholder="生日"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话:" prop="stuTel" placeholder="联系电话">
                            <el-input v-model="data.stuTel" placeholder="联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="邮箱:" prop="stuEmail" placeholder="邮箱">
                            <el-input v-model="data.stuEmail" placeholder="邮箱"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="独生子女:" prop="stuOnlyChild">
                            <el-radio v-model="data.stuOnlyChild" label="是">是</el-radio>
                            <el-radio v-model="data.stuOnlyChild" label="否">否</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="民族:" prop="stuNation">
                            <el-input v-model="data.stuNation" placeholder="民族"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="生源名称:" prop="stuFromAreaName">
                            <el-input v-model="data.stuFromAreaName" placeholder="生源名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="生源区域:" prop="stuFromArea">
                            <el-input v-model="data.stuFromArea" placeholder="生源区域"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="家庭住址:" prop="stuFamilyAddress">
                            <el-input v-model="data.stuFamilyAddress" placeholder="家庭住址"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="辅导员:" prop="stuTutor">
                            <el-input v-model="data.stuTutor" placeholder="辅导员"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="辅导员电话:" prop="stuTutorTel">
                            <el-input v-model="data.stuTutorTel" placeholder="辅导员电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="监护人姓名:" prop="stuGuardiansName">
                            <el-input v-model="data.stuGuardiansName" placeholder="监护人姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="监护人电话:" prop="stuGuardiansTel">
                            <el-input v-model="data.stuGuardiansTel" placeholder="监护人电话"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateStudentBase">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        addStudentBase,
        deleteMultipleStudentBase,
        deleteStudentBase,
        exportExcel,
        page,
        updateStudentBase
    } from "../../../api/modules/student/base";

    import {form, recommendStudent} from "../../../api/modules/dictionary"
    import fileDownload from "../../../utils/fileDownload";
    import cutStr from "../../../utils/cutStr";

    export default {
        name: 'StudentBase',

        data() {
            return {
                keyword: {
                    "stuAge": 18,
                    "stuBank": "",
                    "stuBankId": "",
                    "stuBirthday": "",
                    "stuClass": "",
                    "stuDegrees": "",
                    "stuEmail": "",
                    "stuExamId": "",
                    "stuFamilyAddress": "",
                    "stuFromArea": "",
                    "stuFromAreaName": "",
                    "stuGender": "",
                    "stuGuardiansName": "",
                    "stuGuardiansTel": "",
                    "stuIdentityId": "",
                    "stuInDate": "",
                    "stuInWay": "",
                    "stuIsLoan": "",
                    "stuMajor": "",
                    "stuName": "",
                    "stuNation": "",
                    "stuNum": "",
                    "stuOnlyChild": "",
                    "stuPolitical": "",
                    "stuSchool": "",
                    "stuStatus": "",
                    "stuStatusCategory": "",
                    "stuTel": "",
                    "stuTutor": "",
                    "stuTutorTel": ""
                },
                data: {
                    "id": 0,
                    "stuAge": 18,
                    "stuBank": "",
                    "stuBankId": "",
                    "stuBirthday": "",
                    "stuClass": "",
                    "stuDegrees": "",
                    "stuEmail": "",
                    "stuExamId": "",
                    "stuFamilyAddress": "",
                    "stuFromArea": "",
                    "stuFromAreaName": "",
                    "stuGender": "",
                    "stuGuardiansName": "",
                    "stuGuardiansTel": "",
                    "stuIdentityId": "",
                    "stuInDate": "",
                    "stuInWay": "",
                    "stuIsLoan": "",
                    "stuMajor": "",
                    "stuName": "",
                    "stuNation": "",
                    "stuNum": "",
                    "stuOnlyChild": "",
                    "stuPolitical": "",
                    "stuSchool": "",
                    "stuStatus": "",
                    "stuStatusCategory": "",
                    "stuTel": "",
                    "stuTutor": "",
                    "stuTutorTel": ""
                },
                drawer: false,
                isAdd: true,
                rules: {
                    stuName: [
                        {required: true, message: '请填写学生姓名', trigger: 'blur'}
                    ],
                    stuIdentityId: [
                        {
                            required: true,
                            message: '身份证格式错误',
                            trigger: 'blur',
                            type: "string",
                            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
                        }
                    ],
                    stuNum: [
                        {required: true, message: '请填写学号', trigger: 'blur'}
                    ],
                    stuExamId: [
                        {required: true, message: '请填写考生号', trigger: 'blur'}
                    ],
                    stuGender: [
                        {required: true, message: '请填写性别', trigger: 'blur'}
                    ],
                    stuAge: [
                        {type: "number", required: true, message: '请选择年龄', trigger: 'blur'}
                    ],
                    stuInDate: [
                        {required: true, message: '日期格式错误', trigger: 'blur'}
                    ],
                    stuPolitical: [
                        {required: true, message: '请选择政治面貌', trigger: 'change'}
                    ],
                    stuInWay: [
                        {required: true, message: '请选择入学方式', trigger: 'change'}
                    ],
                    stuStatus: [
                        {required: true, message: '请选择学籍状态', trigger: 'change'}
                    ],
                    stuStatusCategory: [
                        {required: true, message: '请选择学籍类别', trigger: 'change'}
                    ],
                    stuBank: [
                        {required: true, message: '请填写开户银行', trigger: 'blur'}
                    ],
                    stuBankId: [
                        {
                            required: true,
                            message: '请填写银行卡号',
                            trigger: 'blur',
                            type: "string",
                            pattern: /^([1-9]{1})(\d{14}|\d{18})$/
                        }
                    ],
                    stuIsLoan: [
                        {required: true, message: '请选择是否贷款', trigger: 'blur'}
                    ],
                    stuSchool: [
                        {required: true, message: '请填写二级学院', trigger: 'blur'}
                    ],
                    stuMajor: [
                        {required: true, message: '请填写专业', trigger: 'blur'}
                    ],
                    stuClass: [
                        {required: true, message: '请填写班级', trigger: 'blur'}
                    ],
                    stuDegrees: [
                        {required: true, message: '请填写学历层次', trigger: 'blur'}
                    ],
                    stuBirthday: [
                        {required: true, message: '请选择生日', trigger: 'change'}
                    ],
                    stuTel: [
                        {required: true, message: '请填写联系电话', trigger: 'blur'}
                    ],
                    stuEmail: [
                        {type: "email", required: true, message: '邮箱格式错误', trigger: 'blur'}
                    ],
                    stuOnlyChild: [
                        {required: true, message: '请选择独生子女', trigger: 'blur'}
                    ],
                    stuNation: [
                        {required: true, message: '请填写民族', trigger: 'blur'}
                    ],
                    stuFromAreaName: [
                        {required: true, message: '请填写生源名称', trigger: 'blur'}
                    ],
                    stuFromArea: [
                        {required: true, message: '请填写生源区域', trigger: 'blur'}
                    ],
                    stuFamilyAddress: [
                        {required: true, message: '请填写家庭住址', trigger: 'blur'}
                    ],
                    stuTutor: [
                        {required: true, message: '请填写辅导员', trigger: 'blur'}
                    ],
                    stuTutorTel: [
                        {
                            required: true,
                            message: '请填写辅导员电话',
                            trigger: 'blur',
                            type: "string",
                            pattern: /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/
                        }
                    ],
                    stuGuardiansName: [
                        {required: true, message: '请填写监护人姓名', trigger: 'blur'}
                    ],
                    stuGuardiansTel: [
                        {
                            required: true,
                            message: '请填写监护人电话',
                            trigger: 'blur',
                            type: "string",
                            pattern: /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/
                        }
                    ]
                },
                pagination: {
                    current: 1,
                    size: 9
                },
                visible:false,
                page: {
                    row: [],
                    total: 0
                },
                multipleSelection: [],
                centerDialogVisible: false,
                // 推荐信息
                recommend: {
                    student: [],
                    form: {}
                }
            };
        },

        methods: {
            cutStr,
            //修改或添加
            addOrUpdateStudentBase() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        // 是新增就进行添加
                        if (this.isAdd) {
                            addStudentBase(this.data).then((response) => {
                                // 添加成功后端返回保存成功的id
                                this.data.id = response;
                                // 在数组前面添加一个元素
                                this.page.row.unshift(this.data);
                                // 删除数组最后一个元素
                                this.page.row.pop();
                                this.centerDialogVisible = false;
                            })
                        } else {

                            updateStudentBase(this.data).then(() => {
                                // 模拟数据修改
                                for (let row of this.page.row) {
                                    if (row.id === this.data.id) {
                                        Object.assign(row, this.data)
                                    }
                                }
                                this.centerDialogVisible = false;
                            })
                        }
                    }
                })
            },

            dbClick(row){
                this.drawer = true;//打开滑块，并且将数据传输到data里面去
                Object.assign(this.data, row);
            },
            initRecommend() {
                recommendStudent().then(response => {
                    this.recommend.student = response;
                });
                form().then(response => {
                    this.recommend.form = response;
                });
            },
            initStudentBase() {
                this.visible=false
                page(this.pagination, this.keyword).then(response => {
                    this.page.row = response.row;
                    this.page.total = response.total;
                })
            },
            // 查询
            querySearch(queryString, cb) {
                cb(this.recommend.student.filter(item => item.value.indexOf(queryString) !== -1))
            },
            // 当前页大小改变
            handleSizeChange(size) {
                this.pagination.size = size;
                this.initStudentBase();
            },
            // 当前页改变
            handleCurrentChange(current) {
                this.pagination.current = current;
                this.initStudentBase();
            },
            // 修改单个
            handleEdit(row) {
                // 不是添加
                this.isAdd = false;
                Object.assign(this.data, row);
                console.log(this.data);
                this.centerDialogVisible = true;
            },
            handleAdd() {
                // 是添加
                this.isAdd = true;
                Object.assign(this.data, {
                    "id": 0,
                    "stuAge": 18,
                    "stuBank": "",
                    "stuBankId": "",
                    "stuBirthday": "",
                    "stuClass": "",
                    "stuDegrees": "",
                    "stuEmail": "",
                    "stuExamId": "",
                    "stuFamilyAddress": "",
                    "stuFromArea": "",
                    "stuFromAreaName": "",
                    "stuGender": "男",
                    "stuGuardiansName": "",
                    "stuGuardiansTel": "",
                    "stuIdentityId": "",
                    "stuInDate": "",
                    "stuInWay": "",
                    "stuIsLoan": "否",
                    "stuMajor": "",
                    "stuName": "",
                    "stuNation": "",
                    "stuNum": "",
                    "stuOnlyChild": "否",
                    "stuPolitical": "",
                    "stuSchool": "",
                    "stuStatus": "",
                    "stuStatusCategory": "",
                    "stuTel": "",
                    "stuTutor": "",
                    "stuTutorTel": ""
                });
                this.centerDialogVisible = true;
            },
            // 删除单个
            handleDelete(row) {
                this.$confirm(`此操作将永久删除 <strong><i> ${row.stuName} </i></strong> 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true,
                    type: 'warning'
                }).then(() => {
                    deleteStudentBase(row.id).then(() => {
                        // 刷新页面
                        this.initStudentBase();
                    });
                })

            },
            // 多选框
            handleSelectionChange(row) {
                // 获取 ids
                this.multipleSelection = row.map(item => item.id);
            },
            // 删除多个
            handleMultipleDelete() {
                // 大于 0 才删除
                if (this.multipleSelection.length > 0) {
                    this.$confirm(`此操作将永久删除<strong> 多条信息 </strong>是否继续?`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        dangerouslyUseHTMLString: true,
                        type: 'warning'
                    }).then(() => {
                        deleteMultipleStudentBase(this.multipleSelection).then(() => {
                            // 刷新页面
                            this.initStudentBase();
                        });
                    })
                }
            },
            // 导出 Excel
            exportExcel() {
                exportExcel(this.multipleSelection,this.keyword).then(response => {
                    fileDownload(response);
                })
            },
            viewDetails(row) {
                this.drawer = true;//打开滑块，并且将数据传输到data里面去
                Object.assign(this.data, row);
            },
            resetField() {
                // 清空表单验证
                this.$refs.form.resetFields();
            },
            handleDrawerClose() {
                this.drawer = false;
                this.$refs.form.resetFields();
            },
            refresh() {
                this.initStudentBase();
                this.initRecommend();
            }
        },

        mounted() {
            this.refresh();
        },
        watch: {
            keyword: {
                deep: true,
                handler() {
                    this.pagination.current = 1
                }
            }
        }
    }
</script>

<style scoped>
    .el-form-item {
        margin-left: 2%;
    }

    .el-form-item span {
        font-weight: 700;
    }
</style>